<template>
	<view class="address pages">
		<view class="header">
			<!-- 顶部空余 -->
			<view style="width:100%;height: var(--status-bar-height)"></view>
			<view class="nav" v-if="!!id">
				<view class="back" @tap="back">
					<uni-icons type="back" color="#000" size="24"></uni-icons>
				</view>
				<view class="title">
					{{$t('option.address.Modify')}}
				</view>
				<view class="del" @tap="delShow=true">
					{{$t('option.address.Delete')}}
				</view>
			</view>
			<view class="nav" v-else>
				<view class="back" @tap="back">
					<uni-icons type="back" color="#000" size="24"></uni-icons>
				</view>
				<view class="title">
					{{$t('option.address.Add')}}
				</view>
			</view>
		</view>
		<view class="container">
			<view class="item" :class="isName?'is_focus':''">
				<view class="item_title">
					{{$t('option.address.Consignee')}}
				</view>
				<view class="item_content">
					<input type="text" :placeholder="$t('option.address.Name')" placeholder-class="inner_txt" @focus="focus('name')" @blur="blur('name')" v-model="form.name">
				</view>
			</view>
			<view class="item" :class="isMobile?'is_focus':''">
				<view class="item_title">
					{{$t('option.address.Contact')}}
				</view>
				<view class="item_content" style="display: flex;align-items: center;">
					<view style="margin-right: 10rpx;" @click="toCode">
						+ <text style="margin: 0 5rpx;">{{code}}</text>
						<uni-icons type="bottom" size="14"></uni-icons> 
					</view>
					<input type="text" :placeholder="$t('option.address.Mobile')" placeholder-class="inner_txt" @focus="focus('mobile')" @blur="blur('mobile')" v-model="form.mobile">
				</view>
			</view>
			<view class="item">
				<view class="item_title">
					{{$t('option.address.Select')}}
				</view>
				<view class="item_content">
					<view @click="showUniAddressSelector=true" :style="!!this.areaInfoStr?'':'color: #ccc;font-size: 28rpx;'">
						{{this.areaInfoStr||$t('option.address.Please')}}
					</view>
					<UniAddressSelector v-if="showUniAddressSelector" :areaInfoSelected="areaInfoObj" @cancel="handleCancel" @confirm="handleConfirm">
					</UniAddressSelector>
				</view>
			</view>
			<view class="item" :class="isDetail?'is_focus':''">
				<view class="item_title">
					{{$t('option.address.Full')}}
				</view>
				<view class="item_content">
					<u--textarea v-model="form.detailAddress" :placeholder="$t('option.address.Such')" border="none" autoHeight
						placeholderClass="inner_txt" @focus="focus('detail')" @blur="blur('detail')"></u--textarea>
				</view>
			</view>
			<view class="item">
				<view class="item_title">
					{{$t('option.address.Set')}}
				</view>
				<view class="item_content">
					<u-switch v-model="form.isDefault" size="25" activeColor="#00dbdb" @change="changeClick"></u-switch>
				</view>
			</view>
		</view>
		<view class="save" @click="userAddressEdit">{{$t('option.address.Save')}}</view>
		<uni-transition mode-class="fade" :show="delShow" class="mask" :duration="200">
			<view class="mask_container">
				<view class="mask_title">
					{{$t('option.address.Are')}}
				</view>
				<view class="mask_btn">
					<view class="cancel" @tap="delShow=false">
						{{$t('option.address.Cancel')}}
					</view>
					<view class="confirm" @click="userAddressDel">
						{{$t('option.address.Sure')}}
					</view>
				</view>
			</view>
		</uni-transition>
	</view>
</template>

<script>
	import UniAddressSelector from '@/components/shop/uni-address-selector/UniAddressSelector.vue';
	import { userAddressDetail, userAddressEdit, userAddressDel } from '@/api/api.js'
	export default {
		components: {
			UniAddressSelector
		},
		data() {
			return {
				id: null,
				isName: false,
				isMobile: false,
				isDetail: false,
				delShow: false,
				code: 52,
				form: {},
				showUniAddressSelector: false,
				areaInfoObj: {},
				areaInfoStr: ''
			}
		},
		onLoad(opt) {
			if (opt.id) {
				this.id = opt.id
				userAddressDetail({
					token: uni.getStorageSync('token'),
					id: this.id
				}).then(res=>{
					let info = res.data.data
					this.form.name = info.name
					this.code = info.phone_ex
					this.form.mobile = info.phone
					this.areaInfoStr = info.province + info.city + info.area + info.street
					this.areaInfoObj.province = info.province
					this.areaInfoObj.city = info.city
					this.areaInfoObj.area = info.area
					this.areaInfoObj.street = info.street
					this.form.detailAddress = info.address
					this.form.isDefault = info.is_default==1?true:false
				})
			}
		},
		methods: {
			changeClick(){
				this.$forceUpdate() // 页面强制刷新
			},
			toCode(){
				uni.navigateTo({
					url: `/pages/shop/login/code?code=${this.code}`
				})
			},
			// 选择地址四级联动
			handleCancel() {
				this.showUniAddressSelector = false;
			},
			handleConfirm(areaInfoObj) {
				this.areaInfoStr = ''
				this.showUniAddressSelector = false;
				this.areaInfoObj = areaInfoObj;
				console.log(this.areaInfoObj);
				for (let key in areaInfoObj) {
					if (areaInfoObj[key]) {
						this.areaInfoStr += areaInfoObj[key] + '/'
					}
				}
				this.areaInfoStr = this.areaInfoStr.slice(0, -1)
			},
			userAddressEdit(){
				userAddressEdit({
					token: uni.getStorageSync('token'),
					name: this.form.name,
					phone_ex: this.code,
					phone: this.form.mobile,
					province: this.areaInfoObj.province,
					city: this.areaInfoObj.city,
					area: this.areaInfoObj.area,
					street: this.areaInfoObj.street,
					address: this.form.detailAddress,
					is_default: this.form.isDefault?'1':'0',
					id: this.id
				}).then(res=>{
					uni.showToast({
						title: res.data.msg,
						icon: "none"
					})
					setTimeout(() => {
						uni.redirectTo({
							url: '/pages/shop/option/address/addressList'
						})
					}, 600)
				})
			},
			userAddressDel(){
				userAddressDel({
					token: uni.getStorageSync('token'),
					id: this.id
				}).then(res=>{
					uni.showToast({
						title: res.data.msg,
						icon: "none"
					})
					setTimeout(() => {
						uni.redirectTo({
							url: '/pages/shop/option/address/addressList'
						})
					}, 600)
				})
			},
			focus(key) {
				if (key == "name") {
					this.isName = true
				} else if (key == "mobile") {
					this.isMobile = true
				} else {
					this.isDetail = true
				}
			},
			blur(key) {
				if (key == "name") {
					this.isName = false
				} else if (key == "mobile") {
					this.isMobile = false
				} else {
					this.isDetail = false
				}
			},
			back() {
				uni.navigateBack()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.address {
		width: 100%;
		height: 100vh;
		background: #f5f5f9;

		.header {
			background: #fff;

			.nav {
				width: 100%;
				height: 120rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;

				.back {
					position: absolute;
					left: 40rpx;
					top: 50%;
					transform: translateY(-50%);
				}

				.title {
					font-size: 36rpx;
				}

				.del {
					font-size: 28rpx;
					line-height: 28rpx;
					position: absolute;
					right: 40rpx;
					top: 50%;
					transform: translateY(-50%);
				}
			}


		}

		.container {
			background: #fff;
			padding: 0 40rpx;

			.item {
				min-height: 100rpx;
				display: flex;
				align-items: center;
				background: #fff;
				border-bottom: 2rpx solid #f0f0f0;

				&.is_focus {
					border-bottom: 2rpx solid #000;
				}

				&.item:last-child {
					height: 120rpx;
					border-bottom: 2rpx solid transparent;

					.item_content {
						display: flex;
						justify-content: flex-end;
					}
				}

				.item_title {
					min-width: 120rpx;
					font-size: 28rpx;
					font-weight: 600;
					color: #000;
					margin-right: 20rpx;
				}

				.item_content {
					flex: 1;

					uni-input {
						font-size: 28rpx;
					}

					.inner_txt {
						font-size: 28rpx;
						color: #ccc;
					}
				}
			}
		}

		.save {
			margin: 40rpx;
			height: 90rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			font-size: 32rpx;
			background: #01c2c3;
			border-radius: 8rpx;
		}

		.mask {
			position: fixed;
			left: 0;
			bottom: 0;
			right: 0;
			top: 0;
			background: rgba(0, 0, 0, 0.6);
			z-index: 999;

			.mask_container {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				width: 640rpx;
				height: 240rpx;
				background: #fff;
				border-radius: 12rpx;
				box-shadow: 10rpx 10rpx 20rpx 0 rgba(0, 0, 0, 0.5);
				padding: 50rpx 70rpx 50rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.mask_title {
					font-size: 32rpx;
					color: #666;
				}

				.mask_btn {
					display: flex;
					justify-content: flex-end;
					color: #01c2c3;
					font-size: 30rpx;
					line-height: 32rpx;

					.cancel {
						margin-right: 90rpx;
					}
				}
			}
		}
	}

	/deep/.input-value {
		border: none;
		padding: 0;
	}

	/deep/.placeholder {
		color: #ccc;
		font-size: 28rpx;
	}

	/deep/.u-textarea {
		padding: 0;
	}

	.uni-textarea-placeholder {
		font-size: 28rpx;
	}
</style>